<template>
      <nav>
        <span><span style="font-size: 16px;color:rgb(150, 150, 150)">当前位置 :</span><span >志愿项目</span></span>
        <el-divider direction="vertical" />
    </nav>
  <div class="pannel">
        <el-card title="搜索项目" class="search-card">
            <el-form :model="searchForm" >
                <el-row>
                    <el-form-item label="项目区域 :">
                  <el-input
                  style="margin-bottom: 20px;"
                    class="password-input"
                    v-model="searchForm.locationFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="24" :xs="24">
                        <el-form-item label="服务类别 :">
                        <el-radio-group v-model="searchForm.type" size="large" >
                            <el-radio-button class="radioBtn" label="全部" :value="0" />
                            <el-radio-button
                            v-for="(item, index) in activityTypeList"
                            :key="index"
                            :value="item.id"
                            class="radioBtn"
                        >
                            {{ item.desc }}
                        </el-radio-button>
                        </el-radio-group>
                </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                   <el-col :span="24" :xs="24">
                    <el-form-item label="项目状态 :">
                        <el-radio-group v-model="searchForm.status" size="large" >
                            <el-radio-button class="radioBtn" label="全部" :value="0" />
                            <el-radio-button class="radioBtn" label="待启动" :value="1" />
                            <el-radio-button class="radioBtn" label="运行中" :value="2" />
                            <el-radio-button class="radioBtn" label="已结束" :value="3" />
                        </el-radio-group>
                </el-form-item>
                   </el-col>
                </el-row>
                <el-row>
                   <el-col :span="24" :xs="24">
                    <el-form-item label="报名范围 :" >
                        <el-radio-group v-model="searchForm.joinType" size="large" >
                            <el-radio-button class="radioBtn" label="全部" :value="-1" />
                            <el-radio-button class="radioBtn" label="公开招募" :value="0" />
                            <el-radio-button class="radioBtn" label="审核加入" :value="1" />
                        </el-radio-group>
                </el-form-item>
                   </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" :xs="24">
                        <el-form-item label="项目人数 :">
                        <el-radio-group v-model="searchForm.queryMaxParticipants" size="large" >
                            <el-radio-button class="radioBtn" label="全部" :value="-1" />
                            <el-radio-button class="radioBtn" label="1-100" :value="100" />
                            <el-radio-button class="radioBtn" label="101-200" :value="200" />
                            <el-radio-button class="radioBtn" label="201-300" :value="300" />
                            <el-radio-button class="radioBtn" label="300以上" :value="400" />
                        </el-radio-group>
                </el-form-item>
                    </el-col>
                </el-row>
                <el-row >
                    <el-col :span="10" :xs="0">
              <el-form-item label="活动起始日期 :" >
                <el-date-picker
                  v-model="searchForm.startTimeDateRange"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  @change="loadDataList"
                ></el-date-picker>
              </el-form-item>
                </el-col>

                </el-row>
                <el-row>
                    <el-col :span="10" :xs="24">
                    <el-form-item >
                        <div class="searhButton">
                            <input
                            v-model="searchForm.titleFuzzy"
                            clearable
                            placeholder="请输入项目名称"
                            @keyup.enter="loadDataList"
                        >
                        <span @click="loadDataList" class="iconfont icon-search search"></span>
                        </div>
                </el-form-item>
                   </el-col>
                </el-row>
            </el-form>
        </el-card>
         <el-card class="activity-list" v-if="tableData.list.length==0">
           <div style="display: flex; justify-content: center; width: 100%; color: red;font-size: 20px;">
            暂无数据
           </div>
         </el-card>
        <el-card class="activity-list" v-if="tableData.list.length!=0">
            <template #header>
              <div class="card-header">
                <span>项目列表</span>
              </div>
            </template>
            <div class="item-list" >
                <div class="info" @click="showDetail(item.activityId)" v-for="(item,index) in tableData.list " :key="index">
                    <div class="info-img">
                        <img :src="`/api/file/getActivityAvatar/${item.activityId}`"/>
                    </div>
                    <div class="status">
                         <div class="statusInfo">
                            {{item.status==1?"待启动":item.status==2?"运行中":"已结束"}}
                         </div>
                    </div>
                    <div class="title">
                            <span>{{item.title}}</span>
                    </div>
                    <div class="desc">
                        <div>
                            <div style="font-size: 14px;padding: 2px 4px 2px 2px;color: rgb(195, 195, 195);">目标</div>
                            <div style="">{{item.maxParticipants}}个</div>
                        </div>
                        <el-divider  direction="vertical"></el-divider>
                        <div>
                            <div style="font-size: 14px;padding: 2px 4px 2px 2px;color: rgb(195, 195, 195);">报名</div>
                            <div style="">{{item.joinMember}}个</div>
                        </div>
                    </div>
                    <div class="progress">
                         <span>项目进度</span><el-progress :percentage="item.progress" />
                    </div>
                    <div class="otherInfo">
                        <span style="color:red">招募剩余时间 :</span>{{item.leftDays}}天
                    </div>
                </div>
            </div>
            <div class="demo-pagination-block pagination-l"   >
                <el-pagination
                    style="display: flex"
                    v-model:current-page="tableData.pageNo"
                     v-model:page-size="tableData.pageSize"
                    :page-sizes="[15, 30, 35,50 ]"
                    size="large"
                    :pager-count="7"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                     :total="tableData.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
            </div>
            <div class="demo-pagination-block pagination-s">
                <el-pagination
                    style="display: flex"
                    v-model:current-page="tableData.pageNo"
                    v-model:page-size="tableData.pageSize"
                    size="large"
                    :pager-count="5"
                    :disabled="disabled"
                    :background="background"
                    layout="prev, pager, next"
                    :total="tableData.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
import { useRouter, useRoute } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const api={
    loadActivityList:"/account/loadActivityList",
}

const searchForm=ref({
    status:0,
    joinType:-1,
    type:0,
    queryMaxParticipants:-1,
});

const tableInfoRef = ref();
const tableData=ref({
    list:[],
});

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize,
    };

  if (searchForm.value.startTimeDateRange) {
    params.startTimeStart = searchForm.value.startTimeDateRange[0];
    params.startTimeEnd = searchForm.value.startTimeDateRange[1];
    }
    delete params.startTimeDateRange;
    Object.assign(params, searchForm.value);
    if(params.status==0){
        delete params.status;
    }
    if(params.joinType==-1){
        delete params.joinType;
    }
    if(params.type==0){
        delete params.type;
    }
    if(params.queryMaxParticipants==-1){
        delete params.queryMaxParticipants;
    }
    //  发起请求
  let result = await proxy.Request({
    url: api.loadActivityList,
    params: params,
  });
  if (!result) {
    return;
  }
  Object.assign(tableData.value, result.data);
};

loadDataList();

//跳转详情
const showDetail=(activityId)=>{
    router.push(`/site/projectInfo?activityId=${activityId}`);
}

const activityList=[
    {
        "activityId":"1",
       "title":"红领巾宣讲",
       "maxMarticipants":21,
       "joinMemberCount":20,
       "progress":20,
       "leftDays":120,
       "status":1,
    },
    {
        "activityId":"2",
       "title":"红领巾宣讲",
       "maxMarticipants":21,
       "joinMemberCount":20,
       "progress":20,
       "leftDays":120,
       "status":1,
    },
    {
        "activityId":"3",
       "title":"红领巾宣讲",
       "maxMarticipants":21,
       "joinMemberCount":20,
       "progress":20,
       "leftDays":120,
       "status":1,
    },
    {
       "activityId":"4",
       "title":"红领巾宣讲",
       "maxMarticipants":21,
       "joinMemberCount":20,
       "progress":20,
       "leftDays":120,
       "status":1,
    },
    {
        "activityId":"5",
       "title":"红领巾宣讲",
       "maxMarticipants":21,
       "joinMemberCount":20,
       "progress":20,
       "leftDays":120,
       "status":1,
    }
];

const activityTypeList=[
{
        id:"1",
        desc:"社区服务"
    },
    {
        id:"2",
        desc:"扶贫减贫"
    },
    {
        id:"3",
        desc:"资教助学"
    }, {
        id:"4",
        desc:"卫生健康"
    },
    {
        id:"5",
        desc:"法律服务"
    } ,{
        id:"7",
        desc:"环境保护"
    },{
        id:"8",
        desc:"科技科普"
    },{
        id:"9",
        desc:"文化艺术"
    }
];



// 分页

const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (number) => {
    searchForm.value.pageSize=number;
  loadDataList();
}
const handleCurrentChange = (number) => {
    searchForm.value.pageNot=number;
    loadDataList();
}


</script>

<style lang="scss" scoped>
// 搜索部分
.search-card {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    //  background: url("./../../assets/img/bg-search.png") no-repeat center center; /* 替换为你的图片路径 */
    background-size: cover;
    backdrop-filter: blur(10px); /* 虚化效果 */
    // color: #fff; /* 文字颜色调整为白色 */
}

.search-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background: rgba(0, 0, 0, 0.5); /* 半透明黑色覆盖层，增强对比度 */
    border-radius: 8px;
    z-index: -1;
}

.search-card .el-form-item__label {
    color: #fff; /* 确保标签文字颜色为白色 */
}

.search-card .el-input__inner,
.search-card .el-radio-button__inner {
    background-color: rgba(255, 255, 255, 0.7); /* 输入框和按钮的背景色为半透明白色 */
    color: #000; /* 输入框和按钮的文字颜色为黑色 */
    border: none;
    border-radius: 4px;
}

.search-card .el-date-editor .el-range-input {
    background-color: rgba(255, 255, 255, 0.7); /* 日期选择器输入框背景色 */
    color: #000; /* 日期选择器输入框文字颜色 */
}

.search-card .searhButton input {
    background-color: rgba(255, 255, 255, 0.7); /* 搜索框背景色 */
    color: #000; /* 搜索框文字颜色 */
    border: none;
    border-radius: 4px;
    padding: 8px;
    width: 100%;
}

.search-card .searhButton .icon-search {
    cursor: pointer;
    margin-left: 8px;
    font-size: 18px;
}


// 新样式
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: #1e90ff;
  transition: color 0.3s ease;
}

a:hover {
  color: #1c86ee;
}

//分页样式优化
.pagination-l,
.pagination-s {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 8px; /* 项目之间的间距 */
}

.pagination-l {
  @media screen and (max-width: 768px) {
    display: none;
  }
}

.pagination-s {
  display: none;
  @media screen and (max-width: 768px) {
    display: flex;
  }
}

.pagination-l button,
.pagination-s button {
  background: none;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.pagination-l button:hover,
.pagination-s button:hover {
  background-color: #ecf5ff;
  color: #1e90ff;
  border-color: #b3d8ff;
}

.pagination-l .active,
.pagination-s .active {
  background-color: #1e90ff;
  color: #fff;
  border-color: #1e90ff;
}

// 导航栏
nav {
  padding: 10px;
  font-size: 20px;
  font-weight: bolder;
  background-color: #fff;
  background: no-repeat;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  span {
    margin-left: 10px;
    font-size: 16px;
    color: rgb(29, 32, 136);
    cursor: pointer;
    transition: color 0.3s ease;
  }

  span:hover {
    color: #1e90ff;
  }
}

.pannel {
    background: linear-gradient(135deg, #f0f2f5, #e6e6fa); /* 从浅灰到淡紫 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}


// 搜索栏
.searhButton {
  margin-top: 20px;
  height: 40px;
  width: 100%;
  border-radius: 50px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;

  input {
    border: none;
    height: 100%;
    width: 90%;
    padding: 0 20px;
    font-size: 16px;
    outline: none;
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
  }

  input:focus {
    background-color: #f0f0f0;
    border-color: #1e90ff;
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
  }

  .search {
    background-color: rgb(29, 32, 136);
    color: white;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .search:hover {
    background-color: #2c3e50;
  }

  input:focus + .search {
    background-color: #1e90ff;
  }
}

// 活动列表样式优化
.activity-list {
  margin-top: 20px;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  .item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .info {
    flex-basis: calc(20% - 20px); /* 每个盒子占20%的宽度，减去间距 */
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .info-img {
      img {
        width: 100%;
        height: auto;
        object-fit: cover;
        cursor: pointer;
      }
    }

    .status {
      position: relative;
      margin: 10px;
      text-align: center;

      .statusInfo {
        background-color: rgb(70, 142, 70);
        color: white;
        padding: 8px 10px;
        border-radius: 20px;
        font-size: 14px;
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .title {
      font-weight: bold;
      font-size: 18px;
      margin: 10px;
      text-align: center;
    }

    .desc {
      font-size: 14px;
      color: #606266;
      margin: 10px;
      text-align: center;
    }

    .progress {
      margin: 10px;
    }

    .otherInfo {
      font-size: 14px;
      color: #606266;
      margin: 10px;
      text-align: center;
    }
  }

  @media screen and (max-width: 768px) {
    .info {
      flex-basis: calc(45% - 20px); /* 在小屏幕上每个盒子占45%的宽度 */
    }
  }

  @media screen and (max-width: 480px) {
    .info {
      flex-basis: 100%; /* 在极小屏幕上每个盒子占100%的宽度 */
    }
  }
}

// 单选按钮样式优化
/* 单选按钮样式 */
.el-radio-button {
  flex: 1; /* 使每个按钮占据相等的空间 */
  margin-right: 10px; /* 按钮之间的间距 */
  transition: all 0.3s ease; /* 平滑过渡效果 */

  &:last-child {
    margin-right: 0; /* 最后一个按钮不需要右边距 */
  }

  .el-radio-button__inner {
    width: 100%; /* 使按钮内容占满整个宽度 */
    padding: 12px 20px; /* 内边距调整 */
    border-radius: 4px; /* 圆角 */
    font-size: 14px; /* 字体大小 */
    font-weight: 500; /* 字体加粗 */
    color: #606266; /* 默认文字颜色 */
    background-color: #fff; /* 默认背景颜色 */
    border: 1px solid #dcdfe6; /* 默认边框颜色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 轻微的阴影效果 */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;

    /* 悬停状态 */
    &:hover {
      background-color: #ecf5ff; /* 悬停时的背景颜色 */
      color: #e47932; /* 悬停时的文字颜色 */
      border-color: #b3d8ff; /* 悬停时的边框颜色 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 悬停时的阴影效果 */
    }

    /* 激活状态 */
    &.is-active {
      background-color: #e47932; /* 激活时的背景颜色 */
      color: #fff; /* 激活时的文字颜色 */
      border-color: #e47932; /* 激活时的边框颜色 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 激活时的阴影效果 */
    }
  }

  /* 禁用状态 */
  &.is-disabled {
    opacity: 0.6; /* 禁用时的透明度 */
    cursor: not-allowed; /* 禁用时的鼠标指针 */
  }

  /* 响应式设计 */
  @media screen and (max-width: 768px) {
    flex-basis: calc(50% - 10px); /* 在小屏幕上每个按钮占50%的宽度 */
  }

  @media screen and (max-width: 480px) {
    flex-basis: 100%; /* 在极小屏幕上每个按钮占100%的宽度 */
  }
}

/* 按钮组样式 */
.el-radio-group {
  display: flex;
  flex-wrap: wrap; /* 允许按钮换行 */
  gap: 10px; /* 按钮之间的间距 */
  margin-bottom: 20px; /* 按钮组与下方内容的间距 */
}

/* 确保按钮组内的按钮在一行内排列 */
@media screen and (min-width: 768px) {
  .el-radio-group {
    flex-wrap: nowrap;
  }
}

// .pagination-l{
//     display: block;
//     margin-top: 20px;
// }

// .pagination-s{
//     display:none ;
// }
// nav{
//         padding: 10px;
//         font-size: 20px;
//         font-weight: bolder;
//         span{
//             margin-left: 10px;
//             font-size:16px;
//             color: rgb(29, 32, 136);
//             cursor: pointer;
//         }
//     }
// .searhButton{

// height: 40px;
// width: 100%;
// border-radius: 50px;
// display: flex;
// align-items: center;
// // input{
// //     border-top-left-radius: 20px;
// //     border-bottom-left-radius: 20px;

// //     height: 40px;
// //     border:1px solid rgb(29, 32, 136) ;
// //     width: 90%;
// //     padding: 2px 2px 0px 30px;
// // }
// // .search{
// //     background-color: rgb(29, 32, 136);
// //     color: white;
// //     height: 40px;
// //     width: 50px;
// //     display: flex;
// //     align-items: center;
// //     justify-content: center;
// //     font-size: 20px;
// //     border-top-right-radius: 20px;
// //     border-bottom-right-radius: 20px;
// //     cursor: pointer;
// // }

// input {
// border-top-left-radius: 20px;
// border-bottom-left-radius: 20px;
// height: 40px;
// border: 1px solid rgb(29, 32, 136);
// width: 90%;
// padding: 2px 2px 0px 30px;
// outline: none; /* 移除默认的聚焦样式 */
// transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
// }

// input:focus {
// border-color: #1e90ff; /* 聚焦时改变边框颜色 */
// box-shadow: 0 0 5px rgba(30, 144, 255, 0.5); /* 添加阴影效果 */
// background-color: #f0f0f0; /* 聚焦时改变背景颜色 */
// }

// .search {
// background-color: rgb(29, 32, 136);
// color: white;
// height: 40px;
// width: 40px;
// display: flex;
// align-items: center;
// justify-content: center;
// font-size: 20px;
// border-top-right-radius: 20px;
// border-bottom-right-radius: 20px;
// cursor: pointer; /* 鼠标悬停时显示指针 */
// transition: background-color 0.3s;
// }

// .search:hover {
// background-color: #2c3e50; /* 鼠标悬停时改变背景颜色 */
// }

// /* 当输入框聚焦时，改变按钮的颜色 */
// input:focus + .search {
// background-color: #1e90ff; /* 聚焦时改变按钮背景颜色 */
// }

// }

// .radioBtn{
// margin-right: 20px;
// margin-top: 2px;
// border-left: 1px solid rgb(220, 223, 230);
// }

// .activity-list{
// margin-top: 2px;
// width: 100%;
// background-color: rgb(255, 255, 255);
// .item-list{
//     display: flex;
//     flex-direction: row;
//     background-color: rgb(255, 255, 255);
//     flex-wrap: wrap; /* 允许子元素换行 */
//     gap: 2.5%; /* 可选：设置子元素之间的间距 */
// }
// .info{
//     border-bottom: 1px solid rgb(235, 238, 245);
//     margin-top: 10px;
//     flex-basis: 18%; /* 每个盒子占25%的宽度，减去间距 */
//     height: auto; /* 高度自适应 */
//     box-sizing: border-box; /* 确保内边距和边框不会影响盒子的大小 */
//     .info-img{
//         img{
//             height: 50%;
//             width: 70%;
//             justify-content: center;
//             display: flex;
//             margin: 0 auto;
//             cursor: pointer;
//         }
//     }
//     .status{
//         display: flex;
//         width: 70%;
//         margin-left: 15%;
//         background-color: rgb(244, 240, 236);
//         position: relative;
//         justify-content: center;
//         .statusInfo{
//             width: 100%;
//             background-color: rgb(70, 142, 70);
//             padding: 8px 10px 8px 10px;
//             display: flex;
//             justify-content: center; /* 水平居中 */
//             color: white;
//             border-radius: 20px;
//             position: absolute;
//             top: -20px;
//         }

//     }
//     .title{
//         margin-top: 20px;
//         width: 70%;
//         display: flex;
//         margin: 20px auto 4px auto;
//         font-weight: 800;
//         font-size: 18px;

//     }
//     .desc{
//         width: 70%;
//         display: flex;
//         margin: 0 auto;
//         justify-content: center;
//         font-size: 16px;
//         padding: 2px 4px 2px 2px;

//     }
//     .progress{
//         width: 90%;
//         margin: 5%;
//     }
//     .otherInfo{
//         width: 70%;
//         display: flex;
//         justify-content: center;
//         margin: 0 auto;
//         font-size: 16px;
//         margin-bottom:10px;
//    }

// }

// .info:hover {
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬浮时的阴影效果 */
// }
// }

// .el-progress--line {
// margin-bottom: 15px;
// max-width: 600px;
// }

// @media screen and (max-width: 700px) {
//     // .radioBtn{
//     // margin-top: 2px;
//     // border-left: 1px solid rgb(220, 223, 230);
//     // }
//     // :deep(.radioBtn){
//     //    .el-radio-button__inner{
//     //     padding: 13px 26.6%;
//     //    }
//     // }
//     .radio-group{
//     width:100%;
//     display:flex;
//     }

// .el-radio-button{
//  flex:1;
// }
//  .el-radio-button__inner {
//   width: 100%;
//   }

//     .activity-list{
//     margin-top: 2px;
//     width: 100%;
//     background-color: rgb(255, 255, 255);
//     .item-list{
//         display: flex;
//         flex-direction: row;
//         background-color: rgb(255, 255, 255);
//         flex-wrap: wrap; /* 允许子元素换行 */
//         gap: 5%; /* 可选：设置子元素之间的间距 */
//         justify-content: space-between;
//     }
//     .info{
//         border-bottom: 1px solid rgb(235, 238, 245);
//         margin-top: 10px;
//         flex-basis: 45%; /* 每个盒子占25%的宽度，减去间距 */
//         height: auto; /* 高度自适应 */
//         box-sizing: border-box; /* 确保内边距和边框不会影响盒子的大小 */
//     .info-img{
//         img{
//             height: 50%;
//             width: 70%;
//             justify-content: center;
//             display: flex;
//             margin: 0 auto;
//             cursor: pointer;
//         }
//     }
//     .status{
//         display: flex;
//         width: 70%;
//         margin-left: 15%;
//         background-color: rgb(244, 240, 236);
//         position: relative;
//         justify-content: center;
//         .statusInfo{
//             width: 100%;
//             background-color: rgb(70, 142, 70);
//             padding: 8px 10px 8px 10px;
//             display: flex;
//             justify-content: center; /* 水平居中 */
//             color: white;
//             border-radius: 20px;
//             position: absolute;
//             top: -20px;
//         }

//     }
//     .title{
//         margin-top: 20px;
//         width: 70%;
//         display: flex;
//         margin: 20px auto 4px auto;
//         font-weight: 800;
//         font-size: 14px;

//     }
//     .desc{
//         width: 70%;
//         display: flex;
//         margin: 0 auto;
//         justify-content: center;


//     }
//     .progress{
//         width: 90%;
//         margin: 5%;
//     }
//     .otherInfo{
//         width: 100%;
//         display: flex;
//         justify-content: center;
//         margin: 0 auto;
//         font-size: 12px;
//         margin-bottom:10px;
//    }

// }

// .info:hover {
// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬浮时的阴影效果 */
// }

// }

// .pagination-s{
//     display: flex;
//     justify-content: center;
// }
// .pagination-l{
//     display: none;
// }

// }


</style>
